<template>
  <el-form
    :model="addForm"
    class
    label-width="8rem"
    status-icon
  >
    <!-- #region 服务商 -->

    <el-form-item
      :label="$language.local('ServiceProviderName')"
      prop="ServiceProviderName"
    >
      <!-- <select-name
            @change="serviceChange"
            apiName="/api/Common/GetServiceProviderList"
            label-key="ServiceName"
            v-model="addForm.ServiceProviderName"
      ></select-name>-->
      <select-id
        apiName="/api/Common/GetServiceProviderList"
        label-key="ServiceName"
        v-model="addForm.sid"
      ></select-id>
    </el-form-item>
    <!-- #endregion -->
    <el-form-item
      :label="$language.local('CustomerName')"
      prop="CustomerName"
    >
      <!-- <select-name
        @change="customerNameChange"
        apiName="/api/Common/GetMerchantList"
        label-key="customerName"
        v-model="addForm['CustomerName']"
      ></select-name>-->
      <select-id
        :apiName="this.addForm.sid ? `/api/Common/GetMerchantList?sid=${this.addForm.sid}` : ''"
        label-key="customerName"
        v-model="addForm.mid"
        value-key="Id"
      ></select-id>
    </el-form-item>
    <!-- #region 服务费率 -->
    <el-form-item
      :label="$language.local('RechargeRate')"
      prop="RechargeRate"
    >
      <el-select
        @change="rechargeRateChange"
        v-model="RechargeRate"
      >
        <!-- <el-option
          :label="`起征点以上费率 ${addForm.QZDRate}%`"
          :value="addForm.QZDRate"
          disabled
        ></el-option>-->
        <el-option
          :label="`起征点以下费率 ${addForm.Rate}%`"
          :value="addForm.Rate"
        ></el-option>
      </el-select>
    </el-form-item>
    <!-- #endregion -->

    <!-- #endregion -->
    <!-- #region 充值金额 -->
    <el-form-item
      :label="$language.local('RechargeAmount')"
      prop="RechargeAmount"
    >
      <xy-decimal
        :disabled="!RechargeRate || !addForm['ruleType']"
        @change="rechargeChange"
        class="service-account-no"
        v-model="addForm['RechargeAmount']"
      ></xy-decimal>
    </el-form-item>
    <!-- #endregion -->

    <!-- #region 实发金额 -->
    <el-form-item
      :label="$language.local('AccountAmount')"
      prop="AccountAmount"
    >
      <xy-decimal
        :disabled="!RechargeRate || !addForm['ruleType']"
        @change="accountChange"
        class="service-account-no"
        v-model="addForm['AccountAmount']"
      ></xy-decimal>
    </el-form-item>
    <!-- #endregion -->

    <!-- #region 手续费 -->
    <el-form-item :label="$language.local('手续费')">
      <span class="ml-1">
        {{
        $common.toFixed2(addForm.RechargeAmount - addForm.AccountAmount)
        }}
      </span>
    </el-form-item>
    <!-- #endregion -->
  </el-form>
</template>

<script>
export default {
  inject: ["toFixed2"],

  data() {
    return {
      rechargeRate: "",

      RechargeRate: "",
      addForm: {
        sid: "",
        mid: "",
        ruleType: "",
        QZDRate: "",
        Rate: "",
        RechargeAmount: "",
        AccountAmount: "",
      },
    };
  },
  watch: {
    "addForm.AccountAmount": {
      handler(newValue) {
        if (newValue >= 93500) {
          console.log(newValue);
          this.accountChange(newValue);
        }
      },
    },
    "addForm.mid": {
      handler(newId) {
        console.log(newId, this.addForm.sid);

        this.RechargeRate = "",
        this.addForm.ruleType = "";
        this.addForm.RechargeTime = "";
        this.addForm.RechargeAmount = "";
        this.addForm.AccountAmount = "";
        this.addForm.QZDRate = "";
        this.addForm.Rate = "";

        if (!newId || !this.addForm.sid) {
          return;
        }
        this.getRateAndRule(newId, this.addForm.sid);
        // this.getRate(newId, this.addForm.sid);
      },
    },
  },
  methods: {
    serviceChange(e) {
      console.log(e);
      if (!e) {
        return;
      }
      let obj = this.addForm;

      for (const key in obj) {
        if (Object.hasOwnProperty.call(obj, key)) {
          obj[key] = "";
        }
      }
      this.addForm.sid = e.Id;
      this.getServiceBanks();
    },

    async getRateAndRule(mid, sid) {
      console.log(mid);
      if (!mid || !sid) {
        return;
      }
      let response = await this.$http.get(
        `/api/recharge/GetRateAndRule?mid=${mid}&sid=${sid}`
      );
      console.log(response);

      this.addForm.Rate = response.data.Data.Rate;
      this.addForm.QZDRate = response.data.Data.Rate.QZDRate;
      this.addForm.ruleType = response.data.Data.Rule;
      this.RechargeRate = this.addForm.Rate;
    },
    async getRate(id, sid) {
      console.log(id, sid);
      if (!id || !sid) {
        return;
      }
      let response = await this.$http.get(
        `/api/recharge/GetMerchantBank?mid=${id}&sid=${sid}`
      );
      let payInfo = response.data.Data;
      console.log(payInfo);
      this.addForm.PayingAccountName = payInfo[0].PayingAccountName;
      this.addForm.PayingBank = payInfo[0].PayingBankName;
      this.addForm.PayingAccount = payInfo[0].PayingAccount;
      this.addForm.Rate = Number(payInfo[0].Rate);
      this.addForm.QZDRate = Number(payInfo[0].QZDRate);
      this.addForm.ruleType = payInfo[0].Rule;
      this.RechargeRate = this.addForm.Rate;
    },
    rechargeRateChange(...args) {
      console.log(args);
      this.ruleTypeChange();
    },
    ruleTypeChange() {
      // let ruleTyple = e || this.addForm.ruleTyple;
      let recharge = this.addForm.RechargeAmount;
      let account = this.addForm.AccountAmount;

      if (recharge) {
        this.rechargeChange(recharge);
      } else {
        if (!account) {
          return;
        }
        this.accountChange(account);
      }
    },
    rechargeChange(value) {
      this.addForm.AccountAmount = this.calcAccount({
        ruleType: this.addForm.ruleType,
        rate: this.RechargeRate,
        recharge: value,
      });
    },
    accountChange(value) {
      console.log(value);
      this.addForm.RechargeAmount = this.calcRecharge({
        ruleType: this.addForm.ruleType,
        rate: this.RechargeRate,
        account: value,
      });
    },
    calcAccount({ ruleType, rate, recharge }) {
      rate /= 100;
      let res = 0;
      if (ruleType == "A") {
        res = recharge * (1 - rate);
      } else {
        res = recharge / (1 + rate);
      }
      return res.toFixed(2);
    },
    calcRecharge({ ruleType, rate, account }) {
      console.log(ruleType, rate, account);
      rate /= 100;
      console.log(rate);
      let res = 0;
      if (ruleType == "A") {
        res = account / (1 - rate);
      } else {
        res = account * (1 + rate);
      }
      return res.toFixed(2);
    },
  },
};
</script>

<style></style>
